<template>
  <div class="mygame-footer">
    <div class="col-record" id="gameTrade">
      <a @click=jumpToRecords() class="font-white">
        <i class="iconfont icon-monijiaoyijilu"></i>&nbsp;模拟交易记录
      </a>
    </div>

    <div class="col-buy" id="gameBuy">
      <a @click=jumpToTrade() class="font-white">
        <i class="iconfont icon-mairu"></i>&nbsp;模拟交易
      </a>
    </div>
  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  export default {
    data(){
      return {}
    },
    methods: {
      jumpToRecords(){
        this.$router.push({
          path: '/records',
          query: {id: this.$route.query.gameId, userCode: LocalDAO.getUserCode(), type: '3'}
        })
      },
      jumpToTrade(){
        this.$router.push({path: '/trade/buyin', query: {gameId: this.$route.query.gameId}})
      }
    }
  }
</script>

<style lang="css" scoped>
  .mygame-footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 0;
    display: inline-flex;
  }

  .mygame-footer .row {
    width: 100%;
    height: auto;
  }

  .mygame-footer .col-record {
    background-color: #ECB81B;
    text-align: center;
    padding: 0 5%;
    height: 61px;
    line-height: 61px;
    width: 50%;
    font-size: 1.6rem;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mygame-footer .col-buy {
    background-color: #FF5760;
    text-align: center;
    padding: 0 5%;
    height: 61px;
    line-height: 61px;
    width: 50%;
    margin-left: 1px;
    font-size: 1.6rem;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mygame-footer .font-white {
    text-align: center;
    color: #fff;
  }
</style>
